<template>
	<view class="my">
		<view class="bg">

		</view>
		<view class="nologin">
			<image class="head" :src="$imgUrl('/user.png')" mode="scaleToFill" />
		</view>
		<view class="vip">
			<button class="nologin_score" @tap="login" v-if='!token && loginshow'>立即登录</button>
			<view class="space">
				<view class="name">储存空间</view>
				<view style="width: 380rpx; margin-left: 14rpx;"> <u-line-progress activeColor="#0efdba"
						:showText="false" inactiveColor="#0c644e" :percentage="syt" height="14"></u-line-progress>
				</view>
				<view class="num">{{ yykj }}G/{{ kj }}G</view>
			</view>
			<!-- <view class="vip-bg">
				<view v-if="sfhy === 0">暂未开通会员</view>
				<view v-if="sfhy === 1">到期时间:{{ hyjssj }} </view>
			</view> -->

			<view class="ai">
				<view class="ai-title">使用情况</view>
				<view class="ai-list">
					<view class="name">魔法相册</view>
					<view style="width: 350rpx; margin-left: 14rpx;margin-top: 10rpx;"> <u-line-progress
							activeColor="#0efdba" :showText="false" inactiveColor="#0c644e"
							:percentage="arNum/arMaxNum*100" height="14"></u-line-progress>
					</view>
					<view class="num">{{ arNum }}/{{ arMaxNum }}</view>
				</view>
				<view class="ai-list">
					<view class="name">积&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分</view>
					<view style="width: 350rpx; margin-left: 14rpx;margin-top: 10rpx;"> <u-line-progress
							activeColor="#0efdba" :showText="false" inactiveColor="#0c644e"
							:percentage="jfNum/jfMaxNum* 100" height="14"></u-line-progress>
					</view>
					<view class="num">{{ jfNum }}/{{ jfMaxNum }}</view>
				</view>
				<view class="jfyq">
					<button class="acquire_score" @click="hqjf">获取积分</button>
					<button class="acquire_scoreb" @click="yqhy">邀请好友</button>
				</view>
			</view>

			<!-- 设置 -->
			<view class="setting">
				<view class="row">
					<!-- @click="customerService" -->
					<view class="item" @click="jumpToWeChatCustomerService">
						<image class="item-img" :src="$imgUrl('/my_setting1.png')" mode="scaleToFill" />
						<view class="item-name">
							客服
						</view>
					</view>

					<!-- <button type="default" open-type="contact">在线咨询</button> -->
					<view class="item" @click="toGnjs">
						<image class="item-img" :src="$imgUrl('/my_setting2.png')" mode="scaleToFill" />
						<view class="item-name">
							功能介绍
						</view>
					</view>
					<view class="item" @click="openSign">
						<image class="item-img" :src="$imgUrl('/my_setting3.png')" mode="scaleToFill" />
						<view class="item-name">
							签到
						</view>
					</view>
					<view class="item" @click="openJfdh">
						<image class="item-img" :src="$imgUrl('/my_setting4.png')" mode="scaleToFill" />
						<view class="item-name">
							积分兑换
						</view>
					</view>
				</view>
				<view class="row">
					<view class="item" @tap="businessCard()">
						<image class="item-img" :src="$imgUrl('/my_setting5.png')" mode="scaleToFill" />
						<view class="item-name">
							个人信息
						</view>
					</view>
					<view class="item" @click="toJfsy">
						<image class="item-img" :src="$imgUrl('/my_setting6.png')" mode="scaleToFill" />
						<view class="item-name">
							积分使用情况
						</view>
					</view>
					<view class="item" @click="openCode">
						<image class="item-img" :src="$imgUrl('/my_setting7.png')" mode="scaleToFill" />
						<view class="item-name">
							兑换码
						</view>
					</view>
					<view class="item" @click="openCard">
						<image class="item-img" :src="$imgUrl('/kqb.png')" mode="scaleToFill" />
						<view class="item-name">
							卡券包
						</view>
					</view>
				</view>
			</view>
			<view v-if="yhlx === 1 || yhlx === 2 " class="setting">
				<view class="row">
					<view v-if="yhlx === 1 || yhlx === 2" class="item" @click="hxsm">
						<image class="item-img" :src="$imgUrl('/my_setting7.png')" mode="scaleToFill" />
						<view class="item-name">
							核销
						</view>
					</view>
					<view v-if="yhlx === 1" class="item" @click="openGly">
						<image class="item-img" :src="$imgUrl('/my_setting7.png')" mode="scaleToFill" />
						<view class="item-name">
							管理员
						</view>
					</view>

					<view class="item"></view>
					<view class="item"></view>
				</view>
			</view>
		</view>
		<Sign ref="signRef" bg="" @gethy="gethy" />
		<Code ref="codeRef" bg="" @gethy="gethy" />
		<Jfdh ref="jfdhRef" bg="" @gethy="gethy" />
		<hqjf ref="hqjfRef" bg="" @gethy="gethy" />
		<yqhy ref="yqhyRef" bg="" @gethy="gethy" />

	</view>
</template>

<script>
	import Sign from './Sign.vue';
	import Code from './Code.vue';
	import Jfdh from './Jfdh.vue';
	import hqjf from './hqjf.vue';
	import yqhy from './yqhy.vue';
	export default {
		components: {
			Sign,
			Code,
			Jfdh,
			hqjf,
			yqhy

		},
		data() {
			return {
				yhlx: 0,
				sfhy: 0,
				jf: 0,
				arNum: 0,
				jfNum: 0,
				jfMaxNum: 0,
				arMaxNum: 0,
				kj: 0,
				yykj: 0,
				syt: 0,
				hyjssj: "",
				date: [],
				token: '',
				loginshow: true
			};
		},

		onShow() {
			this.token = uni.getStorageSync('token')
			if (uni.getStorageSync('token') !== null && uni.getStorageSync('token') !== undefined && uni.getStorageSync(
					'token') !== '') {
				this.gethy()
			}

		},

		onShareAppMessage(res) {

			if (res.from === 'button') {
				// 可以根据需要添加分享按钮的特定操作
				this.$http.post('/app/ai/aigg', {
					type: 1
				}).then(ress => {
					console.log(ress)
					this.fxNum = this.fxNum - 1
					uni.showToast({
						title: '领取成功!',
						icon: 'none'
					});
					this.$refs.hqjfRef.fxwc();
				})
			}
			var randomParam = Math.random().toString(36).substring(7);
			return {
				title: `魔法相机，让照片动起来!`,
				path: `/pages/index/index`,
				imageUrl: `https://wx93.cn/upload/logo.jpg`,
			};
		},
		methods: {
			hxsm() {
				var that = this
				uni.scanCode({
					success: function(res) {
						if (res.scanType === 'QR_CODE') {
							that.$http.post('/app/pay/hxYhq', {
								id: res.result
							}).then(res => {
								uni.hideScanCode();
								uni.$u.toast('核销成功!')
							})
						}
					},
				})
			},
			openCard() {
				uni.navigateTo({
					url: '/pages/card/index'
				})
			},
			openSign() {
				this.$refs.signRef.open();
			},
			openCode() {
				this.$refs.codeRef.open();
			},
			openJfdh() {
				this.$refs.jfdhRef.open();
			},
			hqjf() {
				this.$refs.hqjfRef.open();
			},
			yqhy() {
				this.$refs.yqhyRef.open();
			},
			openGly() {
				uni.navigateTo({
					url: "/pages/gly/gly"
				})
			},
			// 管理员
			openGly() {
				uni.navigateTo({
					url: "/pages/gly/gly"
				})
			},
			// 客服
			customerService() {
				// uni.navigateTo({
				// 	url: '/pages/subpackage/customer_service'
				// })
			},

			// 跳转微信客服
			jumpToWeChatCustomerService() {
				this.openWeChatCustomerService("https://work.weixin.qq.com/kfid/kfce3cce7809846e271",
					"wwc3a8f54ec754c09d");
			},

			// 打开微信客服
			openWeChatCustomerService(
				weiXinCustomerServiceUrl = "",
				corpId = "",
				showMessageCard = false,
				sendMessageTitle = "",
				sendMessagePath = "",
				sendMessageImg = ""
			) {
				if (!weiXinCustomerServiceUrl || !corpId)
					return Toast("请配置好客服链接或者企业ID");
				// eslint-disable-next-line no-undef
				wx.openCustomerServiceChat({
					// 客服信息
					extInfo: {
						url: weiXinCustomerServiceUrl, // 客服链接 https://work.weixin.qq.com/xxxxxxxx
					},
					corpId, // 企业ID wwed1ca4d3597eXXXX
					showMessageCard, // 是否发送小程序气泡消息
					sendMessageTitle, // 气泡消息标题
					sendMessagePath, // 气泡消息小程序路径（一定要在小程序路径后面加上“.html”，如：pages/index/index.html）
					sendMessageImg, // 气泡消息图片
					success(res) {
						console.log("success", JSON.stringify(res));
					},
					fail(err) {
						console.log("fail", JSON.stringify(err));
						// eslint-disable-next-line no-undef
						return wx.showToast({
							title: err.errMsg,
							icon: "none"
						});
					},
				});
			},


			gethy() {
				var that = this
				that.$http.post('/app/getHy', {}).then(ress => {
					// console.log(ress)
					this.yhlx = ress.data.yhlx
					this.aiNum = ress.data.aiNum
					this.aiMaxNum = ress.data.aiMaxNum
					this.arNum = ress.data.arNum
					this.arMaxNum = ress.data.arMaxNum
					this.dmhNum = ress.data.dmhNum
					this.id = ress.data.id
					this.dmhMaxNum = ress.data.dmhMaxNum
					this.xfNum = ress.data.xfNum
					this.xfMaxNum = ress.data.xfMaxNum
					this.jfNum = ress.data.jfNum
					this.jfMaxNum = ress.data.jfMaxNum
					this.yykj = parseFloat((ress.data.yykj / 1024 / 1024)).toFixed(2)
					this.kj = parseFloat((ress.data.kj / 1024 / 1024)).toFixed(2)
					this.syt = parseFloat((ress.data.yykj / ress.data.kj * 100)).toFixed(2)
					if (ress.data.hyjssj === null) {
						this.sfhy = 0
					} else {
						if (new Date(ress.data.hyjssj)) {
							this.sfhy = 1
							this.hyjssj = ress.data.hyjssj.substring(0, 10);
						}
					}
				})
			},
			login() {
				var that = this
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						// console.log(loginRes.code);
						that.$http.post('/app/login', {
							code: loginRes.code
						}).then(res => {

							uni.showToast({
								title: '登录成功',
								icon: 'none'
							});
							this.loginshow = false
							uni.setStorageSync('token', res.token);
							that.gethy()


						}).catch(function(error) {
							uni.showToast({
								title: error.msg,
								icon: 'none'
							});
						})

					}

				});


			},
			close() {
				this.popupshow = false
			},
			closepop(e) {
				this.popupshow = e
			},
			// ar名片设置
			businessCard() {
				uni.navigateTo({
					url: '/pages/subpackage/business_card?id=' + this.id
				})
			},

			toJfsy() {
				uni.navigateTo({
					url: '/pages/subpackage/ai/jfsy'
				})
			},
			toGnjs() {
				uni.navigateTo({
					url: '/pages/subpackage/ai/gnjs'
				})
			},

		},
		mounted() {

		}
	}
</script>

<style>
	page {
		background-color: #000;
	}
</style>
<style lang="scss" scoped>
	.my {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #000;

		.setting {
			margin-top: 20rpx;
			background-size: 100% 100%;
			// background-image: url('../../static/image/my_setting_bg.png');
			background-image: url($imgUrl + "/my_setting_bg.png");
			width: 700rpx;
			height: 256rpx;

			.row {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;

				.item {
					width: 170rpx;
					justify-content: center;
					display: flex;
					align-items: center;
					flex-direction: column;

					&-img {
						width: 40rpx;
						height: 40rpx;

					}

					&-name {
						margin-top: 10rpx;
						font-size: 26rpx;
						color: #0efdba;
					}
				}
			}
		}

		.fun {
			margin-top: 20rpx;
			background-size: 100% 100%;
			// background-image: url('../../static/image/use_num_bg.png');
			background-image: url($imgUrl + "/use_num_bg.png");
			width: 700rpx;
			height: 160rpx;
			box-sizing: border-box;

			padding: 0 30rpx;

			&-title {
				color: #0efdba;
				font-weight: bold;
				margin-top: 8rpx;


			}

			&-list {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;

				// align-items: center;
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;

					&-num {
						font-size: 30rpx;
						color: #fff;
					}

					&-name {
						font-size: 26rpx;
						color: #fff;
					}
				}
			}
		}

		.ai {
			// margin-top: 30rpx;
			background-size: 100% 100%;
			// background-image: url('../../static/image/use_num_bg.png');
			background-image: url($imgUrl + "/use_num_bg.png");
			width: 700rpx;
			height: 300rpx;
			box-sizing: border-box;

			padding: 0 30rpx;

			&-title {
				color: #0efdba;
				font-weight: bold;
				margin-top: 18rpx;
				height: 60rpx;
				line-height: 60rpx;
			}

			.name {
				margin: 0 20rpx 0 30rpx;
				color: #fff;
				font-weight: bold;
				font-size: 26rpx;
			}

			.num {
				margin-left: 20rpx;
				color: #0efdba;
				font-size: 22rpx;
			}


			&-list {
				margin-top: 20rpx;
				display: flex;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;

					&-num {
						font-size: 30rpx;
						color: #fff;
					}

					&-name {
						font-size: 26rpx;
						color: #fff;
					}
				}
			}
		}

		.vip {
			margin-top: 70rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			&-bg {
				width: 700rpx;
				height: 158rpx;
				background-size: 100% 100%;
				// background-image: url('../../static/image/vip1.png');
				background-image: url($imgUrl + "/vip1.png");
				position: relative;

				view {
					position: absolute;
					right: 20rpx;
					top: 60rpx;
					color: #fff;
					font-size: 22rpx;
				}
			}

			.space {
				width: 680rpx;
				height: 50rpx;
				background-color: #0c3e33;
				border-radius: 50rpx 50rpx 0 0;
				display: flex;
				align-items: center;

				.name {
					margin-left: 30rpx;
					color: #fff;
					font-weight: bold;
					font-size: 26rpx;
				}

				.num {
					margin-left: 20rpx;
					color: #0efdba;
					font-size: 22rpx;
				}

			}
		}

		.bg {
			width: 100%;
			height: 300rpx;
			background-size: 100% 100%;
			// background-image: url('../../static/image/my_bg.png');
			background-image: url($imgUrl + "/my_bg.png");
		}

		.head {
			position: absolute;
			width: 110rpx;
			height: 110rpx;
			top: 245rpx;
			left: calc(50vw - 55rpx);
		}
	}

	.acquire_score {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 60rpx;
		color: #333;
		font-family: PingFangSC;
		color: #ffffff;
		font-weight: 500;
		font-size: 26rpx;
		padding: 0;
		border-radius: 50px;
		background: linear-gradient(90deg, #13b1a2 0%, #276329 100%);
		border: none;
		margin-top: 30rpx;
		margin-left: 30rpx;
	}

	.acquire_scoreb {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 60rpx;
		color: #333;
		font-family: PingFangSC;
		color: #ffffff;
		font-weight: 500;
		font-size: 26rpx;
		padding: 0;
		border-radius: 50px;
		background: linear-gradient(90deg, #13b1a2 0%, #276329 100%);
		border: none;
		margin-top: -60rpx;
		margin-left: 400rpx;
	}

	.nologin_score {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 600rpx;
		height: 60rpx;
		color: #333;
		font-family: PingFangSC;
		color: #ffffff;
		font-weight: 500;
		font-size: 26rpx;
		padding: 0;
		border-radius: 50px;
		background: linear-gradient(90deg, #13b1a2 0%, #276329 100%);
		border: none;
		margin-bottom: 22rpx;
	}
</style>